import React from 'react';
import Link from './Link';
import { Collapse } from 'antd';
import ContentInput from './ContentInput';
import JumpSettings from './JumpSettings';
import ChartsChain from './ChartsChain';
import UploadImage from './UploadImage';
import Rotate from './Rotate';
import DrillDown from './DrillDown';

interface IProps {
	currentType: string;
	typeconfig: any;
	allConfigs: any;
	config: any;
	mutualForm: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	pageId: string;
	deloitteFlag: string;
}

const MutualIndex = ( props: IProps ) => {
	const { Panel } = Collapse;
	const { config, mutualForm, currentType, typeconfig, onValuesChange, allConfigs, pageId, deloitteFlag } = props;
	return (
		<Collapse defaultActiveKey={[ 'contentinput' ]} ghost>
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'contentinput' ) !== -1 &&
				( <Panel header="文本" key="contentinput">
					<ContentInput config={config} form={mutualForm} onValuesChange={onValuesChange}></ContentInput>
				</Panel> )
			}

			{typeconfig[currentType] && typeconfig[currentType].indexOf( 'uploadImage' ) !== -1 && (
				<Panel header="请选择图片上传" key="uploadImage">
					<UploadImage
						pageId={pageId}
						id={config.key}
						config={config}
						form={mutualForm}
						onValuesChange={onValuesChange}
					></UploadImage>
				</Panel>
			)}

			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'rotate' ) !== -1 &&
				( <Panel header="翻转角度" key="rotate">
					<Rotate config={config} form={mutualForm} onValuesChange={onValuesChange}></Rotate>
				</Panel> )
			}

			{typeconfig[currentType] && typeconfig[currentType].indexOf( 'link' ) !== -1 && (
				<Panel header="超链接设置" key="link">
					<Link
						config={config}
						form={mutualForm}
						onValuesChange={onValuesChange}
					></Link>
				</Panel>
			)}
			{typeconfig[currentType] && typeconfig[currentType].indexOf( 'JumpSettings' ) !== -1 && (
				<Panel header="跳转设置" key="JumpSettings">
					<JumpSettings
						config={config}
						form={mutualForm}
						onValuesChange={onValuesChange}
						deloitteFlag={deloitteFlag}
					></JumpSettings>
				</Panel>
			)}

			{typeconfig[currentType] && typeconfig[currentType].indexOf( 'chartsChain' ) !== -1 && (
				<Panel header="联动" key="ChartsChain">
					<ChartsChain
						config={config}
						allConfigs={allConfigs}
						form={mutualForm}
						onValuesChange={onValuesChange}
					></ChartsChain>
				</Panel>
			)}

			{typeconfig[currentType] && typeconfig[currentType].indexOf( 'drillDown' ) !== -1 && (
				<Panel header="下钻" key="DrillDown">
					<DrillDown
						config={config}
						onValuesChange={onValuesChange}
					></DrillDown>
				</Panel>
			)}

		</Collapse>

	);
};

export default React.memo( MutualIndex );
